<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="false">
    <template v-slot:common>
      <div class="wb-checkbox" :data-id="item.id" :style="commonStyle">
        <div v-if="commonAttr.title && commonAttr.title.length > 0" class="checkbox-title" :style="titleStyle" @click.stop>
          <strong>{{commonAttr.title}}</strong>
          <span v-show="commonAttr.need">*</span>
        </div>
        <van-checkbox-group v-model="selecteds" class="checkbox-group" :style="flexDirection" :max="parseInt(commonAttr.max)">
          <van-cell-group v-for="(item_, index) in lists" :key="index" :style="itemConStyle" class="checkbox-cell-group" :border="false">
            <div :style="itemStyle" @click.stop="onCheckbox($event, index)">
              <div v-if="commonAttr.isPic" class="wid-hei-inherit"><img v-lazy="item_.url" /></div>
              <div v-if="commonAttr.itemType == RADIO_CHECKBOX_TYPE_MAP.btn" :ref="setBtnRef" class="checkbox-btn" :style="radioCheckboxBtnStyle(index)">{{item_.text}}</div>
              <template v-else-if="commonAttr.itemType == RADIO_CHECKBOX_TYPE_MAP.selectedFrame">
                <van-checkbox v-if="commonAttr.itemStyles.url" :ref="setCheckboxsRef" :style="radioCheckboxBtnStyle(index)" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">
                  <template #icon="props">
                    {{item_.text}}
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                  </template>
                </van-checkbox>
                <van-checkbox v-else :ref="setCheckboxsRef" :style="radioCheckboxBtnStyle(index)" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">{{item_.text}}</van-checkbox>
              </template>
              <div v-else class="checkbox-btn-con">
                <div :ref="setBtnRef" class="checkbox-btn" :style="radioCheckboxBtnStyle(index)">{{item_.text}}</div>
                <van-checkbox v-if="commonAttr.itemStyles.url" class="margin-left-8" :ref="setCheckboxsRef" :style="radioCheckboxBtnStyle_" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor">
                  <template #icon="props">
                    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                  </template>
                </van-checkbox>
                <van-checkbox v-else :ref="setCheckboxsRef" class="margin-left-8" :style="radioCheckboxBtnStyle_" :name="index+1" :shape="commonAttr.shape" :checked-color="commonAttr.selectedStyles.backgroundColor"></van-checkbox>
              </div>
            </div>
          </van-cell-group>
        </van-checkbox-group>
        <div v-if="commonAttr.isOther" class="checkbox-other padding-0-8">
          <span class="padding-4">其他</span>
          <van-field class="padding-4 border-grey" :placeholder="commonAttr.otherPlaceholder" :border="false" @input="onCheckboxInput"/>
        </div>
      </div>
    </template>
  </inject-template>
</template>
<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { radioCheckbox } from "@/components/js/radio-checkbox"
import { ref, onBeforeUpdate } from 'vue'

export default {
  name: 'WbCheckbox',
  mixins: [utils, commonUtils, radioCheckbox],
  props:{
    item: Object
  },
  setup () {
    let btnRefs = []
    // let radiosRefs = []
    let checkboxsRefs = []
    const setBtnRef = el => {
      btnRefs.push(el)
    }
    // const setRadiosRef = el => {
    //   radiosRefs.push(el)
    // }
    const setCheckboxsRef = el => {
      checkboxsRefs.push(el)
    }
    onBeforeUpdate(() => {
      btnRefs = []
      // radiosRefs = []
      checkboxsRefs = []
    })
    return {
      btnRefs,
      // radiosRefs,
      checkboxsRefs,
      // setRadiosRef,
      setCheckboxsRef,
      setBtnRef,
      selecteds: ref([]),
    }
  },
  components: {
    InjectTemplate,
  },
};
</script>
<style lang="scss">
.wb-checkbox{
  width: inherit;
  height: inherit;

  .checkbox-group{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;

    .checkbox-cell-group{
      background-color: inherit;

      .checkbox-btn-con{
        display: flex;
        flex-direction: row;
      }
      .checkbox-btn{
        display: flex;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        flex-flow: 1;
        background-repeat: no-repeat;
        background-size: contain;
      }
      img{
        width: 100%;
        object-fit: contain;
      }
    }
  }
  .checkbox-other{
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;

    span{
      width: 14%;
      display: inline-block;
    }
  }

  .checkbox-title {
    color: inherit;
    strong {
      display: inline-block;
      color: inherit;
    }
    span {
      color: #f00;
    }
  }
}

</style>
